<template>
  <Header title="账号管理" />
  <van-cell-group inset>
    <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    <van-field v-model="value" label="个人签名" placeholder="请输入个人签名" />
    <van-field v-model="pass" label="密码" placeholder="请输入密码" />
  </van-cell-group>
  <van-button type="primary" round block color="#ffc400" class="save-btn" @click="save"
    >保存</van-button
  >
  <van-button type="primary" round block color="#ffc400" class="save-btn" @click="logOut"
    >退出登录</van-button
  >
</template>

<script>
import Header from "@/components/Header.vue";
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import { showToast } from "vant";
import "vant/es/toast/style";
export default {
  components: { Header },
  setup() {
    const router = useRouter()
    const data = reactive({
      name: "",
      value: "战胜自己才是命运的强者",
      pass: "",
    });
    const save = ()=>{
      if(data.name && data.pass){
        let userInfo = JSON.parse(localStorage.userInfo);
        let newUserInfo = {
          user:data.name || userInfo.name,
          pass:data.pass || userInfo.pass,
        }
        localStorage.setItem('userInfo',JSON.stringify(newUserInfo))
        showToast('修改成功');
        router.push('/mine')
      }
    }
    const logOut = ()=>{
      localStorage.removeItem('isLogin');
      showToast('退出成功');
      router.push('/login')
    }
    return {
      ...toRefs(data),
      save,
      logOut
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}

.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>